<template>
    <div class="tmpl">
        <!--1.0使用mui中的图文表格，并根据需求加以改造-->
        <ul class="mui-table-view mui-grid-view">
            <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">-->
                <!--<a href="#">-->
                    <!--<img class="mui-media-object" src="../../../statics/images/bg.jpg">-->
                <!--</a>-->
                <!--<div class="desc">-->
                    <!--<h5>想静静的喝咖啡</h5>-->
                    <!--<div class="box">-->
                        <!--<p>-->
                        <!--<h6> <span>￥2195</span><s>￥2499</s></h6>-->
                        <!--</p>-->
                        <!--<div class="sell">-->
                            <!--<div class="topsell">热卖中</div>-->
                            <!--<div class="count">剩60件</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</li>-->
            <li v-for="item in goodslist" class="mui-table-view-cell mui-media mui-col-xs-6">
                <router-link v-bind='{to:"/goods/goodsInfo/" + item.id}'>
                    <img class="mui-media-object" :src="item.img_url">  <!--注意这里src是传统html的标签，里面如果要填动态的数据，必须要绑定一下v-bind:src="item.img_url和缩写:src="item.img_url""-->
                </router-link>
                <div class="desc">
                    <h5>{{item.title}}</h5>
                    <div class="box">
                        <p>
                        <h6> <span>￥{{item.sell_price}}</span><s>￥{{item.market_price}}</s></h6>
                        </p>
                        <div class="sell">
                            <div class="topsell">热卖中</div>
                            <div class="count">剩余{{item.stock_quantity}}件</div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<style scoped>
    .mui-table-view.mui-grid-view .mui-table-view-cell{
        padding:5px;
    }
    .mui-grid-view li{
        border:1px solid rgba(92,92,92,0.4);
        margin:4px 2px 4px 4px;
        box-shadow:0 0 4px #666;
    }
    .desc h5{
        color:#000;
        text-align: left;
        font-size: 12px;
        font-family:'微软雅黑';
        height: 25px;
        overflow: hidden;
    }
    .desc .box{
        height:60px;
        background-color: rgba(92,92,92,0.1);
        margin:0;
        padding:5px;
    }
    .desc .box h6{
        text-align: left;
    }
    .desc .box h6 span{
        color: red;
        font-size: 14px;
        margin-right: 15px;
    }
    .sell{
        margin-top: 12px;
        font-size: 13px;
    }
    .sell .topsell{
        float: left;
        width:40%;
        text-align: left;
        color: rgba(92,92,92,0.8);
    }
    .sell .count{
        float: right;
        width:50%;
        text-align: right;
        color: rgba(92,92,92,0.8);
    }
</style>
<script>
    import common from '../../kits/common.js';
    export default{
        data(){
            return{
                goodslist:[] //用来存储api返回的message中的数据
            }
        },
        created(){
            //注意：在这里之所以能调用方法，是因为在执行created之前已经在vue实例对象中创建好data()和methods()中的所有成员
            this.getGoodsList(1);  //默认获取第一页数据
        },
        methods:{
            getGoodsList(pageindex){
                //1.0定义api
                let url = common.apihost + '/api/getgoods?pageindex=' + pageindex;
                //2.0发出ajax的get请求
                this.$http.get(url).then(
                    res=>{
                        this.goodslist = res.body.message;
                    },
                    res=>{
                        console.log('商品列表数据请求失败');
                    }
                );
            }
        }
    }
</script>